<!DOCTYPE html>
<html ng-app="chargingApp">
<head>
	<meta charset="utf-8"/>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="dist/css/unslider.css">
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="dist/js/unslider-min.js"></script>
</head>
<body ng-controller="chargingController">
<div id="wrap">	
		<div class="head">
			<div class="logo bd line"><img src="img/logo_1.png"></div>
			<div class="weather bd line">
				<span>
					<div class="weather-text" ng-bind="weatherList.weather">晴</div>
					<span class="temperature"><em class="normal" ng-bind="weatherList.city_temperature">26</em>℃</span>
				</span>
			</div>
			<div class="line">
				<ul class="date">
					<li id="date"></li>
					<li id="week"></li>
					<li id="now"></li>
				</ul>
			</div>
</div>
	<div class="content banner">
		<ul>
			<li>
				<div class="pile" ng-repeat="lists in list">
					<div class="top">
						<div class="bg" ng-if="$index%2==0"><img src="img/img_tips_2.png"></div>
						<div class="left gauge1">
							<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status==2">
								<li class="black">B枪口</li>
								<li><span ng-bind="lists.charger_v">380</span>V</li>
								<li><span ng-bind="lists.charger_p">60</span>KW</li>
								<li><span ng-bind="lists.charger_i">72</span>A</li>
							</ul>
							<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status!==2">
								<li class="black">B枪口</li>
								<li><span>0</span>V</li>
								<li><span>0</span>KW</li>
								<li><span>0</span>A</li>
							</ul>
							<div class="state" ng-if="lists.charge_status==0 || lists.charge_status==3" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
								<div class="pic"><img src="img/free-1.png"></div>
								<div class="text-ifame"><span class="state-text">空闲中...</span></div>
							</div>
							<div class="state" ng-if="lists.charge_status==1" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
								<div class="pic"><img src="img/pica.png"></div>
								<div class="text-ifame"><span class="state-text">预约中...</span></div>
							</div>
							<div class="state" ng-if="lists.charge_status==2" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
								<div class="pic">
									<img src="img/charging_1.png">
									<div class="soc"><span ng-bind="lists.soc+'%'" class="socText">75%</span></div>
								</div>
								<div class="text-ifame"><span class="state-text">充电中...</span></div>
							</div>
							<div class="state" ng-if="lists.charge_status==8" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
								<div class="pic"><img src="img/outLine.png"></div>
								<div class="text-ifame"><span class="state-text">离线中...</span></div>
							</div>
							<ul class="portNo" ng-if="$index%2==0&&lists.charge_status==2">
								<li class="black">A枪口</li>
								<li><span ng-bind="lists.charger_v">380</span>V</li>
								<li><span ng-bind="lists.charger_p">60</span>KW</li>
								<li><span ng-bind="lists.charger_i">72</span>A</li>
							</ul>
							<ul class="portNo" ng-if="$index%2==0&&lists.charge_status!==2">
								<li class="black">A枪口</li>
								<li><span>0</span>V</li>
								<li><span>0</span>KW</li>
								<li><span>0</span>A</li>
							</ul>
						</div>
					</div>
					<div class="bottom">
						<div class="data-msg" ng-if="lists.charge_status!==2">
							<div class="line gauge"><div>已充电量</div><span class="battery">_</span></div>
							<div class="line gauge"><div>预计剩余时间</div><span class="remaining">_</span></div>
							<div class="line"><div>电池温度</div><span class="BTemp">_</span></div>
						</div>
						<div class="data-msg white-color" ng-if="lists.charge_status==2">
							<div class="line gauge"><div>已充电量</div><span class="battery" ng-bind="lists.charger_kwh+'度'">_</span></div>
							<div class="line gauge"><div>预计剩余时间</div><span class="remaining" ng-bind="lists.remaining_time+'分钟'">_</span></div>
							<div class="line"><div>电池温度</div><span class="BTemp" ng-bind="lists.battery_temperature+'℃'">_</span></div>
						</div>
						<div class="pileNOOO" ng-if="$index%2==0">
							<ul class="pileNo">
								<li><span  class="num" ng-bind="$index/2+1">1</span><em class="symbol normal">#</em></li>
								<li class="text">直流桩</li>
							</ul>
						</div>
					</div>
				</div>
			</li>
			<li>
			  	<div class="pile" ng-repeat="lists in list_1">
					<div class="top">
						<div class="bg" ng-if="$index%2==0"><img src="img/img_tips_2.png"></div>
						<div class="left gauge1">
							<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status==2">
								<li class="black">B枪口</li>
								<li><span ng-bind="lists.charger_v">380</span>V</li>
								<li><span ng-bind="lists.charger_p">60</span>KW</li>
								<li><span ng-bind="lists.charger_i">72</span>A</li>
							</ul>
							<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status!==2">
								<li class="black">B枪口</li>
								<li><span>0</span>V</li>
								<li><span>0</span>KW</li>
								<li><span>0</span>A</li>
							</ul>
							<div class="state" ng-if="lists.charge_status==0 || lists.charge_status==3" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
								<div class="pic"><img src="img/free-1.png"></div>
								<div class="text-ifame"><span class="state-text">空闲中...</span></div>
							</div>
							<div class="state" ng-if="lists.charge_status==1" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
								<div class="pic"><img src="img/pica.png"></div>
								<div class="text-ifame"><span class="state-text">预约中...</span></div>
							</div>
							<div class="state" ng-if="lists.charge_status==2" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
								<div class="pic">
									<img src="img/charging_1.png">
									<div class="soc"><span ng-bind="lists.soc+'%'" class="socText">75%</span></div>
								</div>
								<div class="text-ifame"><span class="state-text">充电中...</span></div>

							</div>
							<div class="state" ng-if="lists.charge_status==8" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
								<div class="pic"><img src="img/outLine.png"></div>
								<div class="text-ifame"><span class="state-text">离线中...</span></div>
							</div>
							<ul class="portNo" ng-if="$index%2==0&&lists.charge_status==2">
								<li class="black">A枪口</li>
								<li><span ng-bind="lists.charger_v">380</span>V</li>
								<li><span ng-bind="lists.charger_p">60</span>KW</li>
								<li><span ng-bind="lists.charger_i">72</span>A</li>
							</ul>
							<ul class="portNo" ng-if="$index%2==0&&lists.charge_status!==2">
								<li class="black">A枪口</li>
								<li><span>0</span>V</li>
								<li><span>0</span>KW</li>
								<li><span>0</span>A</li>
							</ul>
						</div>
					</div>
					<div class="bottom">
						<div class="data-msg" ng-if="lists.charge_status!==2">
							<div class="line gauge"><div>已充电量</div><span class="battery">_</span></div>
							<div class="line gauge"><div>预计剩余时间</div><span class="remaining">_</span></div>
							<div class="line"><div>电池温度</div><span class="BTemp">_</span></div>
						</div>
						<div class="data-msg white-color" ng-if="lists.charge_status==2">
							<div class="line gauge"><div>已充电量</div><span class="battery" ng-bind="lists.charger_kwh+'度'">_</span></div>
							<div class="line gauge"><div>预计剩余时间</div><span class="remaining" ng-bind="lists.remaining_time+'分钟'">_</span></div>
							<div class="line"><div>电池温度</div><span class="BTemp" ng-bind="lists.battery_temperature+'℃'">_</span></div>
						</div>
						<div class="pileNOOO" ng-if="$index%2==0">
							<ul class="pileNo">
								<li><span  class="num" ng-bind="$index/2+5">1</span><em class="symbol normal">#</em></li>
								<li class="text">直流桩</li>
							</ul>
						</div>
					</div>
				</div>				
			</li>
			<li>		  	
			<div class="pile" ng-repeat="lists in list_2">
				<div class="top">
					<div class="bg" ng-if="$index%2==0"><img src="img/img_tips_2.png"></div>
					<div class="left gauge1">
						<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status==2">
							<li class="black">B枪口</li>
								<li><span ng-bind="lists.charger_v">380</span>V</li>
								<li><span ng-bind="lists.charger_p">60</span>KW</li>
								<li><span ng-bind="lists.charger_i">72</span>A</li>
						</ul>
						<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status!==2">
							<li class="black">B枪口</li>
							<li><span>0</span>V</li>
							<li><span>0</span>KW</li>
							<li><span>0</span>A</li>
						</ul>
						<div class="state" ng-if="lists.charge_status==0 || lists.charge_status==3" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/free-1.png"></div>
							<div class="text-ifame"><span class="state-text">空闲中...</span></div>
						</div>
						<div class="state" ng-if="lists.charge_status==1" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/pica.png"></div>
							<div class="text-ifame"><span class="state-text">预约中...</span></div>
						</div>
						<div class="state" ng-if="lists.charge_status==2" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/charging_1.png"></div>
							<div class="text-ifame"><span class="state-text">充电中...</span></div>

						</div>
						<div class="state" ng-if="lists.charge_status==8" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/outLine.png"></div>
							<div class="text-ifame"><span class="state-text">离线中...</span></div>
						</div>
						<ul class="portNo" ng-if="$index%2==0&&lists.charge_status==2">
							<li class="black">A枪口</li>
							<li><span ng-bind="lists.charger_v">380</span>V</li>
							<li><span ng-bind="lists.charger_p">60</span>KW</li>
							<li><span ng-bind="lists.charger_i">72</span>A</li>
						</ul>
						<ul class="portNo" ng-if="$index%2==0&&lists.charge_status!==2">
							<li class="black">A枪口</li>
							<li><span>0</span>V</li>
							<li><span>0</span>KW</li>
							<li><span>0</span>A</li>
						</ul>
					</div>
				</div>
				<div class="bottom">
					<div class="data-msg" ng-if="lists.charge_status!==2">
						<div class="line gauge"><div>已充电量</div><span class="battery">_</span></div>
						<div class="line gauge"><div>预计剩余时间</div><span class="remaining">_</span></div>
						<div class="line"><div>电池温度</div><span class="BTemp">_</span></div>
					</div>
					<div class="data-msg white-color" ng-if="lists.charge_status==2">
						<div class="line gauge"><div>已充电量</div><span class="battery" ng-bind="lists.charger_kwh+'度'">_</span></div>
						<div class="line gauge"><div>预计剩余时间</div><span class="remaining" ng-bind="lists.remaining_time+'分钟'">_</span></div>
						<div class="line" ng-bind="battery_temperature+'℃'"><div>电池温度</div><span class="BTemp">_</span></div>
					</div>
					<div class="pileNOOO">
						<ul class="pileNo" ng-if="$index%2==0">
							<li><span  class="num" ng-bind="$index/2+9">1</span><em class="symbol normal">#</em></li>
							<li class="text">直流桩</li>
						</ul>
					</div>
				</div>
			</div>
			</li>
			<li>
			<div class="pile" ng-repeat="lists in list_3">
				<div class="top">
					<div class="bg" ng-if="$index%2==0"><img src="img/img_tips_2.png"></div>
					<div class="left gauge1">
						<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status==2">
							<li class="black">B枪口</li>
							<li><span ng-bind="lists.charger_v">380</span>V</li>
							<li><span ng-bind="lists.charger_p">60</span>KW</li>
							<li><span ng-bind="lists.charger_i">72</span>A</li>
						</ul>
						<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status!==2">
							<li class="black">B枪口</li>
							<li><span>0</span>V</li>
							<li><span>0</span>KW</li>
							<li><span>0</span>A</li>
						</ul>
						<div class="state" ng-if="lists.charge_status==0 || lists.charge_status==3" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/free-1.png"></div>
							<div class="text-ifame"><span class="state-text">空闲中...</span></div>
						</div>
						<div class="state" ng-if="lists.charge_status==1" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/pica.png"></div>
							<div class="text-ifame"><span class="state-text">预约中...</span></div>
						</div>
						<div class="state" ng-if="lists.charge_status==2" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/charging_1.png"></div>
							<div class="text-ifame"><span class="state-text">充电中...</span></div>

						</div>
						<div class="state" ng-if="lists.charge_status==8" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/outLine.png"></div>
							<div class="text-ifame"><span class="state-text">离线中...</span></div>
						</div>
						<ul class="portNo" ng-if="$index%2==0&&lists.charge_status==2">
							<li class="black">A枪口</li>
							<li><span ng-bind="lists.charger_v">380</span>V</li>
							<li><span ng-bind="lists.charger_p">60</span>KW</li>
							<li><span ng-bind="lists.charger_i">72</span>A</li>
						</ul>
						<ul class="portNo" ng-if="$index%2==0&&lists.charge_status!==2">
							<li class="black">A枪口</li>
							<li><span>0</span>V</li>
							<li><span>0</span>KW</li>
							<li><span>0</span>A</li>
						</ul>
					</div>
				</div>
				<div class="bottom">
						<div class="data-msg" ng-if="lists.charge_status!==2">
							<div class="line gauge"><div>已充电量</div><span class="battery">_</span></div>
							<div class="line gauge"><div>预计剩余时间</div><span class="remaining">_</span></div>
							<div class="line"><div>电池温度</div><span class="BTemp">_</span></div>
						</div>
						<div class="data-msg white-color" ng-if="lists.charge_status==2">
							<div class="line gauge"><div>已充电量</div><span class="battery" ng-bind="lists.charger_kwh+'度'">_</span></div>
							<div class="line gauge"><div>预计剩余时间</div><span class="remaining" ng-bind="lists.remaining_time+'分钟'">_</span></div>
							<div class="line"><div>电池温度</div><span class="BTemp">_</span></div>
						</div>
					<div class="pileNOOO">
						<ul class="pileNo" ng-if="$index%2==0">
							<li><span  class="num" ng-bind="$index/2+13">1</span><em class="symbol normal">#</em></li>
							<li class="text">直流桩</li>
						</ul>
					</div>
				</div>
			</div>
			</li>
			<li>
		  	<div class="pile" ng-repeat="lists in list_4">
				<div class="top">
					<div class="bg" ng-if="$index%2==0"><img src="img/img_tips_2.png"></div>
					<div class="left gauge1">
						<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status==2">
							<li class="black">B枪口</li>
							<li><span ng-bind="lists.charger_v">380</span>V</li>
							<li><span ng-bind="lists.charger_p">60</span>KW</li>
							<li><span ng-bind="lists.charger_i">72</span>A</li>
						</ul>
						<ul class="portNo" ng-if="$index%2!==0&&lists.charge_status!==2">
							<li class="black">B枪口</li>
							<li><span>0</span>V</li>
							<li><span>0</span>KW</li>
							<li><span>0</span>A</li>
						</ul>
						<div class="state" ng-if="lists.charge_status==0 || lists.charge_status==3" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/free-1.png"></div>
							<div class="text-ifame"><span class="state-text">空闲中...</span></div>
						</div>
						<div class="state" ng-if="lists.charge_status==1" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/pica.png"></div>
							<div class="text-ifame"><span class="state-text">预约中...</span></div>
						</div>
						<div class="state" ng-if="lists.charge_status==2" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/charging_1.png"></div>
							<div class="text-ifame"><span class="state-text">充电中...</span></div>

						</div>
						<div class="state" ng-if="lists.charge_status==8" ng-class="{gauge2:$index%2==0,gauge3:$index%2!==0}">
							<div class="pic"><img src="img/outLine.png"></div>
							<div class="text-ifame"><span class="state-text">离线中...</span></div>
						</div>
						<ul class="portNo" ng-if="$index%2==0&&lists.charge_status==2">
							<li class="black">A枪口</li>
							<li><span ng-bind="lists.charger_v">380</span>V</li>
							<li><span ng-bind="lists.charger_p">60</span>KW</li>
							<li><span ng-bind="lists.charger_i">72</span>A</li>
						</ul>
						<ul class="portNo" ng-if="$index%2==0&&lists.charge_status!==2">
							<li class="black">A枪口</li>
							<li><span>0</span>V</li>
							<li><span>0</span>KW</li>
							<li><span>0</span>A</li>
						</ul>
					</div>
				</div>
				<div class="bottom">
						<div class="data-msg" ng-if="lists.charge_status!==2">
							<div class="line gauge"><div>已充电量</div><span class="battery">_</span></div>
							<div class="line gauge"><div>预计剩余时间</div><span class="remaining">_</span></div>
							<div class="line"><div>电池温度</div><span class="BTemp">_</span></div>
						</div>
						<div class="data-msg white-color" ng-if="lists.charge_status==2">
							<div class="line gauge"><div>已充电量</div><span class="battery" ng-bind="lists.charger_kwh+'度'">_</span></div>
							<div class="line gauge"><div>预计剩余时间</div><span class="remaining" ng-bind="lists.remaining_time+'分钟'">_</span></div>
							<div class="line"><div>电池温度</div><span class="BTemp" ng-bind="lists.battery_temperature+'℃'">_</span></div>
						</div>
					<div class="pileNOOO">
						<ul class="pileNo" ng-if="$index%2==0">
							<li><span  class="num" ng-bind="$index/2+17">1</span><em class="symbol normal">#</em></li>
							<li class="text">直流桩</li>
						</ul>
					</div>
				</div>
			</div>				
			</li>
		</ul>			
	</div>
</div>
</body>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/pile.js"></script>
<script type="text/javascript" src="js/pileService.js"></script>
<script type="text/javascript">
	$(function() {
		$('.banner').unslider({
		delay: 8000,                   
		dots: false,               
		autoplay:true,
		arrows: false,
		nav:false              
	});
	});
</script>
</html>